<template>
    <div class="characters-page">
        <el-card class="characters-card">
            <h2 class="characters-title">角色信息创建与修改申请</h2>
            <el-form
                :model="form"
                label-width="160px"
                style="max-width: 900px; margin: auto"
            >
                <el-form-item label="角色名称">
                    <el-input
                        v-model="form.name"
                        readonly
                        disabled
                        placeholder="自动获取，无需填写"
                    />
                </el-form-item>
                <el-form-item label="角色职位">
                    <el-input
                        v-model="form.title"
                        placeholder="请输入角色职位"
                    />
                </el-form-item>
                <el-form-item label="角色简介">
                    <el-input
                        v-model="form.desc"
                        placeholder="请输入角色简介"
                    />
                </el-form-item>
                <el-form-item label="头像链接">
                    <el-input
                        v-model="form.avatar"
                        placeholder="请输入头像图片URL"
                    />
                </el-form-item>
                <el-form-item label="小视频下方介绍">
                    <el-input
                        v-model="form.rightText"
                        placeholder="请输入小视频下方介绍"
                    />
                </el-form-item>
                <el-form-item label="背景视频链接">
                    <el-input
                        v-model="form.bgVideo"
                        placeholder="请输入背景视频URL"
                    />
                </el-form-item>
                <el-form-item label="图片链接">
                    <el-input
                        v-model="form.leftImg"
                        placeholder="请输入图片URL"
                    />
                </el-form-item>
                <el-form-item label="头像框图片链接">
                    <el-input
                        v-model="form.frameImg"
                        placeholder="请输入头像框图片URL"
                    />
                </el-form-item>
                <el-form-item label="视频链接2">
                    <el-input
                        v-model="form.videoRight"
                        placeholder="请输入视频2 URL"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="warning"
                        :loading="loading"
                        @click="goToUpload"
                        round
                        >点击前往</el-button
                    >
                    <p>可以前往该链接上传图片和视频：{{ upload_URL }}</p>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        :loading="loading"
                        @click="handleSubmit"
                        round
                        >提交申请</el-button
                    >
                </el-form-item>
            </el-form>
            <el-divider />
            <h2 style="text-align: left; margin-bottom: 16px; color: #409eff">
                角色申请记录
            </h2>
            <el-table :data="pagedCharacters">
                <el-table-column prop="name" label="角色名称" width="120" />
                <el-table-column prop="title" label="角色职位" width="120" />
                <el-table-column prop="avatar" label="头像" width="80">
                    <template #default="scope">
                        <el-image
                            :src="scope.row.avatar"
                            style="width: 3rem; height: 3rem"
                            fit="cover"
                            v-if="scope.row.avatar"
                            :preview-src-list="[scope.row.avatar]"
                            preview-teleported
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="desc" label="简介" width="180" />
                <el-table-column
                    prop="rightText"
                    label="小视频下方介绍"
                    width="180"
                />
                <el-table-column prop="bgVideo" label="背景视频" width="280">
                    <template #default="scope">
                        <video
                            v-if="scope.row.bgVideo"
                            :src="scope.row.bgVideo"
                            style="width: 16rem"
                            controls
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="leftImg" label="图片" width="130">
                    <template #default="scope">
                        <el-image
                            :src="scope.row.leftImg"
                            style="width: 5rem"
                            fit="contain"
                            v-if="scope.row.leftImg"
                            :preview-src-list="[scope.row.leftImg]"
                            preview-teleported
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="frameImg" label="头像框" width="80">
                    <template #default="scope">
                        <el-image
                            :src="scope.row.frameImg"
                            style="width: 3rem"
                            fit="contain"
                            v-if="scope.row.frameImg"
                            :preview-src-list="[scope.row.frameImg]"
                            preview-teleported
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="videoRight" label="视频2" width="280">
                    <template #default="scope">
                        <video
                            v-if="scope.row.videoRight"
                            :src="scope.row.videoRight"
                            style="width: 16rem"
                            controls
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                        <el-tag
                            :type="
                                scope.row.status === '已通过'
                                    ? 'success'
                                    : scope.row.status === '未通过'
                                    ? 'danger'
                                    : 'info'
                            "
                        >
                            {{ scope.row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" />
                <el-table-column label="操作" width="120">
                    <template #default="scope">
                        <el-button
                            size="small"
                            @click="openEdit(scope.row)"
                            round
                            >编辑</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: center; margin: 24px 0">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="characters.length"
                    v-model:current-page="currentPage"
                />
            </div>
        </el-card>
        <!-- 编辑对话框 -->
        <el-dialog
            v-model="showEditDialog"
            title="编辑角色"
            width="700px"
            center
        >
            <el-form :model="editForm" label-width="150px">
                <el-form-item label="角色名称">
                    <el-input v-model="editForm.name" readonly disabled />
                </el-form-item>
                <el-form-item label="角色职位">
                    <el-input v-model="editForm.title" />
                </el-form-item>
                <el-form-item label="角色简介">
                    <el-input v-model="editForm.desc" />
                </el-form-item>
                <el-form-item label="头像链接">
                    <el-input v-model="editForm.avatar" />
                </el-form-item>
                <el-form-item label="小视频下方介绍">
                    <el-input v-model="editForm.rightText" />
                </el-form-item>
                <el-form-item label="背景视频链接">
                    <el-input v-model="editForm.bgVideo" />
                </el-form-item>
                <el-form-item label="图片链接">
                    <el-input v-model="editForm.leftImg" />
                </el-form-item>
                <el-form-item label="头像框图片链接">
                    <el-input v-model="editForm.frameImg" />
                </el-form-item>
                <el-form-item label="视频链接2">
                    <el-input v-model="editForm.videoRight" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="showEditDialog = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="handleEditSave"
                    :loading="editLoading"
                    >保存</el-button
                >
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
    createCharacter,
    getUserCharacters,
    updateCharacter,
    getUserById,
} from "./api";
import { upload_URL } from "../config/http.js";

const userId = sessionStorage.getItem("user_id");
const characters = ref([]);
const user = ref(null);

const form = reactive({
    name: "",
    title: "",
    desc: "",
    avatar: "",
    rightText: "",
    bgVideo: "",
    leftImg: "",
    frameImg: "",
    videoRight: "",
});
const loading = ref(false);
const currentPage = ref(1);
const pageSize = 3;
const pagedCharacters = computed(() => {
    const start = (currentPage.value - 1) * pageSize;
    return characters.value.slice(start, start + pageSize);
});
function goToUpload() {
    window.open(upload_URL, "_blank");
}
function fetchCharacters() {
    if (userId) {
        getUserCharacters(userId).then((res) => {
            characters.value = res;
        });
    }
}
function fetchUser() {
    if (userId) {
        getUserById(userId).then((data) => {
            user.value = data;
            form.name = data.name || "";
        });
    }
}
function handleSubmit() {
    if (!form.name || !form.avatar) {
        ElMessage.warning("请填写角色名称和头像链接");
        return;
    }
    loading.value = true;
    createCharacter({
        userId,
        name: form.name,
        title: form.title,
        desc: form.desc,
        avatar: form.avatar,
        rightText: form.rightText,
        bgVideo: form.bgVideo,
        leftImg: form.leftImg,
        frameImg: form.frameImg,
        videoRight: form.videoRight,
    })
        .then((res) => {
            ElMessage.success(res.message || "提交成功");
            fetchCharacters();
            Object.keys(form).forEach((key) => (form[key] = ""));
            fetchUser();
        })
        .catch((err) => {
            ElMessage.error(err?.error || "提交失败");
        })
        .finally(() => {
            loading.value = false;
        });
}
const showEditDialog = ref(false);
const editForm = reactive({
    _id: "",
    name: "",
    title: "",
    desc: "",
    avatar: "",
    rightText: "",
    bgVideo: "",
    leftImg: "",
    frameImg: "",
    videoRight: "",
    status: "待审批",
});
const editLoading = ref(false);
function openEdit(row) {
    Object.assign(editForm, row);
    showEditDialog.value = true;
}
function handleEditSave() {
    if (!editForm.name || !editForm.avatar) {
        ElMessage.warning("角色名称和头像链接不能为空");
        return;
    }
    editLoading.value = true;
    updateCharacter(editForm._id, {
        operatorId: userId,
        name: editForm.name,
        title: editForm.title,
        desc: editForm.desc,
        avatar: editForm.avatar,
        rightText: editForm.rightText,
        bgVideo: editForm.bgVideo,
        leftImg: editForm.leftImg,
        frameImg: editForm.frameImg,
        videoRight: editForm.videoRight,
        status: "待审批",
    })
        .then((res) => {
            ElMessage.success(res.message || "更新成功");
            showEditDialog.value = false;
            fetchCharacters();
        })
        .catch((err) => {
            ElMessage.error(err?.error || "更新失败");
        })
        .finally(() => {
            editLoading.value = false;
        });
}
onMounted(() => {
    fetchUser();
    fetchCharacters();
});
</script>

<style lang="scss" scoped>
.characters-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100%;
    background: transparent;
}
.characters-card {
    border-radius: 32px;
    box-shadow: 0 8px 32px 0 rgba(60, 60, 120, 0.12);
    background: #fff;
    animation: mainPop 0.7s cubic-bezier(0.55, 0, 0.1, 1);
    width: 100%;
    height: 100%;
}
.characters-title {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 24px;
    letter-spacing: 2px;
}
@keyframes mainPop {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
</style>